{% extends 'base.html' %}

{% block title %} | Login {% endblock %}
{% block content %}
  {% load static %}
  {% load socialaccount %}
  {% providers_media_js %}
  <div class="sub-banner overview-bgi">
    <div class="container breadcrumb-area">
      <div class="breadcrumb-areas">
        <h1>Login To Your Account</h1>
        <ul class="breadcrumbs">
          <li><a href="{% url 'home' %}l">Home</a></li>
          <li class="active">Login</li>
        </ul>
      </div>
    </div>
  </div>
  <!-- Sub Banner end -->

  <!-- Contact section start -->
  <div class="contact-section">
    <div class="container">
      <div class="row">
        <div class="col-lg-12">
          <div class="form-section">
            <div class="logo-2">
              <a href="index.html">
                <img src="{% static 'img/logos/black-logo.png' %}" alt="logo">
              </a>
            </div>
            <h3>Sign into your account</h3>
            {% include 'includes/messages.html' %}
            <form action="{% url 'login' %}" method="POST">
              {% csrf_token %}
              <div class="form-group form-box">
                <input type="text" name="username" class="input-text" placeholder="Username" required>
                <i class="flaticon-mail"></i>
              </div>
              <div class="form-group form-box">
                <input type="password" name="password" class="input-text" placeholder="Password" required>
                <i class="flaticon-lock"></i>
              </div>
              <div class="form-group mb-0 clearfix">
                <button type="submit" class="btn-md btn-theme float-left">Login</button>
              </div>
              <div class="extra-login clearfix">
                <span>Or Login With</span>
              </div>
              <div class="clearfix"></div>
              <ul class="social-list">
{#                <li><a href="{% provider_login_url 'facebook' method='js_sdk' %}" class="facebook-bg"><i class="fa fa-facebook facebook-i"></i><span>Facebook</span></a></li>#}
                <li><a href="{% provider_login_url 'google' %}" class="google-bg"><i class="fa fa-google google-i"></i><span>Google</span></a></li>
              </ul>
            </form>
            <p>Don't have an account? <a href="{% url 'register' %}" class="thembo"> Register here</a></p>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- Contact section end -->
{% endblock %}